<template>
  <div class="main-con associationGoods">
    <!-- 搜索框 -->
    <div class="search-con">
      <div class="search-item">
        <div class="search-item-title">商品编号</div>
        <div class="search-item-input">
          <el-input size="mini" v-model="formData.productNo" placeholder="请输入商品编号"></el-input>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">商品名称</div>
        <div class="search-item-input">
          <el-input size="mini" v-model="formData.socialProductName" placeholder="请输入商品名称"></el-input>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">商品类别</div>
        <div class="search-item-input">
          <el-select size="mini" v-model="formData.categoryId" placeholder="请选择商品类别">
            <el-option v-for="item in bigCategoryOptions" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
          </el-select>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">创建时间</div>
        <div class="search-item-input">
          <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.timeStart" type="datetime" placeholder="请选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false"></el-date-picker>
        </div>
        <div>~</div>
        <div class="search-item-input">
          <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.timeEnd" type="datetime" placeholder="请选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :clearable="false"></el-date-picker>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title"></div>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
      </div>
    </div>

    <!-- 按钮组 -->
    <div class="btn-group-con">
      <el-button size="mini" type="primary" @click="handleAdd">添加商品</el-button>
    </div>

    <!-- 按钮组 -->
    <div class="btn-group-con">
        <el-radio-group v-model="formData.status" size="mini" @change="handleSearch">
            <el-radio-button label="1">出售中</el-radio-button>
            <el-radio-button label="2">已售罄</el-radio-button>
            <el-radio-button label="0">仓库中</el-radio-button>
        </el-radio-group>
    </div>

    <!-- 表格数据 -->
    <div class="table-con" v-loading="loading">
      <el-table v-loading="loading" :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
        <el-table-column type="selection" align="center" width="50">
		    </el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="productNo" label="商品编号" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="socialProductName" label="商品名称" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="商品图片" width="" align="center">
            <template slot-scope="scope">
                <img :src="scope.row.img" alt="" style="width: 92px; height: 50px;" v-if="scope.row.img"/>
            </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="商品类别" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="smaCategoryName" label="商品状态" width="" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <span>{{statusOptions[scope.row.status]}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="mallPrice" label="销售价" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" width="" align="center">
          <template slot-scope="scope">
            <div class="handleBtn">
              <span @click="handleUpdate(scope.$index, scope.row)">编辑</span>
              <span @click="handleDelete(scope.$index, scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 表格分页 -->
    <div class="pagination-con">
      <div class="batch-btn-con">批量设置：
        <el-button size="mini" type="primary">安全比例</el-button>
      </div>
      <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
      </m-pagination>
    </div>
  </div>
</template>

<script>
import { queryAssociationGoodsInfo, deleteAssociationGoodsInfo } from "@/common/service/productManagement/associationGoods.js";
import { queryBigCategoryInfo } from '@/common/service/productManagement/goodsInfo.js'
import mPagination from "@/components/m-pagination/m-pagination";
export default {
    name: "associationGoods",
    data() {
        return {
            // 搜索条件
            formData: {
                productNo: "", //商品编号
                socialProductName: "", //商品名称
                categoryId: "", //商品类别
                timeStart: "", //开始时间
                timeEnd: "", //结束时间
                status: 1, //状态
                pageNum: 1,
                pageSize: 10
            },
            //下拉框数据
            bigCategoryOptions: [],//商品类别下拉框数据
            statusOptions:['仓库中','出售中','已售罄'],
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false //表格加载动画
        };
    },
    created() {
        //初始化表格数据
        this._queryAssociationGoodsInfo();
        //初始化大分类下拉框数据
        this._queryBigCategoryInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询社群商品信息表格数据
        _queryAssociationGoodsInfo() {
            this.loading = true;
            queryAssociationGoodsInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.content;
                    this.total = res.totalElements;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryAssociationGoodsInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryAssociationGoodsInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this._queryAssociationGoodsInfo();
        },
        //点击清空
        handleClear() {
            this.formData = {
                productNo: "",
                socialProductName: "",
                categoryId: "",
                timeStart: "",
                timeEnd: "",
                status: 1,
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryAssociationGoodsInfo();
        },
        //查询商品类别下拉框数据
        _queryBigCategoryInfo(){
          var data = {};
          queryBigCategoryInfo(data).then(res => {
            this.bigCategoryOptions = res;
          }).catch(err => {
            this.$message.error(err.message);
          })
        },

        /*----------------------------添加操作----------------------------*/
        handleAdd() {
            this.$router.push({
                path: "/index/associationGoods/editAssociationGoods",
                query: {
                    editType: "add",
                    editText: "新增"
                }
            });
        },

        /*----------------------------编辑操作----------------------------*/
        handleUpdate(index, row) {
            this.$router.push({
                path: "/index/associationGoods/editAssociationGoods",
                query: {
                    editType: "update",
                    editText: "编辑"
                }
            });
            localStorage.setItem("editData", JSON.stringify(row));
        },

        /*----------------------------删除操作----------------------------*/
        //点击删除
        handleDelete(index,row) {
            this.$confirm('您确定删除该商品信息吗？', '删除商品', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this._deleteAssociationGoodsInfo(row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //执行删除操作
        _deleteAssociationGoodsInfo(row){
            var data = {
                ids: row.id
            }
            deleteAssociationGoodsInfo(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this._queryAssociationGoodsInfo();
            }).catch(err => {
                this.$message.error(err.message);
            })
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pagination-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>